<template>
        <el-tabs v-model="activeName" @tab-click="handleClick" id="appoin-box" :stretch="true">
        <el-tab-pane label="今日预约-未到店" name="first">
            <div class="gray">
                <div class="appoin-not">
                    <div class="appoin-th" v-for="(item,index) in appointmentData1" :key="index">
                        <div class="app-head"></div>
                        <div class="app-msg">
                            <span class="app-name">{{item.memberName}}</span>
                            <img src="../../assets/image/Diamonds-3.png" alt="" class="app-icon">
                            <span class="app-vip">黄金会员</span>
                        </div>
                        <div class="app-contact">
                            <div class="con-box">
                                <span class="con-left">电话号码:</span>
                                <span class="con-right">{{item.memberPhoneNumber}}</span>
                            </div>
                            <div class="con-box">
                                <span class="con-left">预约技师:</span>
                                <span class="con-right">{{item.technicianName}}</span>
                            </div>
                            <div class="con-box">
                                <span class="con-left">预约时间:</span>
                                <span class="con-right">{{item.reservationTime}}</span>
                            </div>
                        </div>
                        <div class="app-but">
                            <div class="but-msg">
                                <p>开台</p>
                            </div>
                            <div class="but-msg">
                                <p class="but-top">短信<br>提醒</p>
                            </div>
                            <div class="but-msg">
                                <el-button type="text" @click="update(item.reservationId,item.reservationState)"
                                    class="but-top">修改<br>预约
                                </el-button>

                                <el-dialog title="修改预约时间" :visible.sync="dialogFormVisible">

                                    <el-date-picker format="yyyy 年 MM 月 dd 日 HH : mm : ss"
                                        value-format="yyyy-MM-dd HH:mm:ss" v-model="updateDate.reservationTime"
                                        type="datetime" placeholder="选择日期时间">
                                    </el-date-picker>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="updateTime">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div class="but-msg">
                                <el-button type="text" @click="open(item.reservationId)" class="but-top">取消<br>预约
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    layout="prev, pager, next" :total="total1" :current-page="currentPage" :page-size="pageSize">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="今日预约-已到店" name="second">
            <div class="gray">
                <div class="appoin-not">
                    <div class="appoin-th" v-for="(item,index) in appointmentData2" :key="index">
                        <div class="app-head"></div>
                        <div class="app-msg">
                            <span class="app-name">{{item.memberName}}</span>
                            <img src="../../assets/image/Diamonds-3.png" alt="" class="app-icon">
                            <span class="app-vip">黄金会员</span>
                        </div>
                        <div class="app-contact">
                            <div class="con-box">
                                <span class="con-left">电话号码:</span>
                                <span class="con-right">{{item.memberPhoneNumber}}</span>
                            </div>
                            <div class="con-box">
                                <span class="con-left">预约技师:</span>
                                <span class="con-right">{{item.technicianName}}</span>
                            </div>
                            <div class="con-box">
                                <span class="con-left">预约时间:</span>
                                <span class="con-right">{{item.reservationTime}}</span>
                            </div>
                        </div>
                        <div class="app-done">
                            <img src="../../assets/image/yidaodian.png" alt="" width="60px">
                            <p>已到店</p>
                        </div>
                    </div>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    layout="prev, pager, next" :total="total2" :current-page="currentPage" :page-size="pageSize">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="往日预约" name="third">
            <div class="gray">
                <div class="appoin-not">
                    <div class="app-search">
                        <el-input placeholder="请输入订单号" v-model="searchData" clearable size="small">
                        </el-input>
                        <template>
                            <el-select v-model="value" placeholder="请选择状态" size="small">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <el-date-picker size="small" v-model="value2" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开台时间" end-placeholder="开台时间"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                        <el-button type="primary" size="small">搜索</el-button>
                    </div>
                    <div class="appoin-th" v-for="(item,index) in appointmentData" :key="index">
                        <div class="app-head"></div>
                        <div class="app-msg">
                            <span class="app-name">{{item.memberName}}</span>
                            <img src="../../assets/image/Diamonds-3.png" alt="" class="app-icon">
                            <span class="app-vip">黄金会员</span>
                        </div>
                        <div class="app-contact">
                            <div class="con-box">
                                <span class="con-left">电话号码:</span>
                                <span class="con-right">{{item.memberPhoneNumber}}</span>
                            </div>
                            <div class="con-box">
                                <span class="con-left">预约技师:</span>
                                <span class="con-right">{{item.technicianName}}</span>
                            </div>
                            <div class="con-box">
                                <span class="con-left">预约时间:</span>
                                <span class="con-right">{{item.reservationTime}}</span>
                            </div>
                        </div>
                        <div class="app-done">
                            <img src="../../assets/image/yidaodian.png" alt="" width="60px">
                            <p>已到店</p>
                        </div>
                    </div>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="pageSize">
                </el-pagination>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {
        createNamespacedHelpers
    } from "vuex";
    const {
        mapActions,
        mapState,
        mapMutations
    } = createNamespacedHelpers("appointment");
    export default {
        data() {
            return {
                activeName: 'first',
                searchData: '',
                newData: {},
                options: [{
                    value: '选项1',
                    label: '未到店'
                }, {
                    value: '选项2',
                    label: '已到店'
                }, {
                    value: '选项3',
                    label: '往日预约'
                }],
                value: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: '',
                dialogFormVisible: false,
                updateDate: {
                    id: '',
                    reservationTime: '',
                    state: ''
                }
            };
        },
        computed: {
            ...mapState(['appointmentData', 'appointmentData1', 'appointmentData2', 'currentPage', 'pageSize', 'pages',
                'total', 'pages1', 'total1', 'pages2', 'total2'
            ]),
            // filterAppointmentData() {
            //     this.newData = this.appointmentData.filter(e => e == this.appointmentData.memberName)
            // }
        },
        methods: {
            ...mapActions(['GetAppointment', 'GetAppointment1', 'GetAppointment2', 'DelAppointment',
                'UpdateAppointment'
            ]),
            ...mapMutations(['setCurrentPage', 'setPageSize']),
            handleClick(tab, event) {
                console.log(tab, event);
            },
            async open(id) {

                this.$confirm('此操作将取消预约, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                            type: 'success',
                            message: '取消预约成功!'
                        },
                        this.DelAppointment(id));
                    this.GetAppointment();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            handleSizeChange(val) {
                this.setPageSize(val);
                this.GetAppointment();
                // console.log(`每页 ${val} 条`);

            },
            handleCurrentChange(val) {
                this.setCurrentPage(val);
                this.GetAppointment();
                // console.log(`当前页: ${val}`);
            },
            update(id, state) {

                this.updateDate.id = id;
                this.updateDate.state = state;
                this.dialogFormVisible = true;
            },
            async updateTime() {
                this.dialogFormVisible = false
                const data = await this.UpdateAppointment(this.updateDate)
                // console.log('data', data);
                this.GetAppointment();
            },
        },
        mounted() {
            this.GetAppointment()
            this.GetAppointment1()
            this.GetAppointment2()
            // this.filterAppointmentData()
            // console.log('newData', this.newData);
        }
    };
</script>

<style scoped lang="scss">
    #appoin-box {
        width: 1024px;
        margin: 0 auto;
    }

    .gray {
        background-color: #EFF2F6;
    }

    .appoin-not {
        width: 100%;
        padding-top: 20px;
        background-color: #EFF2F6;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .app-msg {
        text-align: center;
        margin-top: 10px;
    }

    .app-msg>img {
        margin: 0 10px;
        vertical-align: middle;
    }

    .appoin-th {
        width: 22%;
        background-color: white;
        border-radius: 5px;
        padding: 0 10px;
        padding-top: 20px;
        margin-bottom: 20px;
    }

    .appoin-th .app-name {
        font-size: 22px;
    }

    .appoin-th .app-vip {
        font-size: 14px;
        color: #E4B014;
    }

    .app-head {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        margin: 0 auto;
        background-image: url("../../assets/image/touxiang.jpg");
        background-size: contain;
    }

    .con-box {
        width: 100%;
        line-height: 30px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }

    .con-box>.con-left {
        color: gray;
    }

    .app-but {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        color: white;
    }

    .app-but> :nth-child(1) {
        background-image: linear-gradient(180deg, #81DBFB, #298AFF);
    }

    .app-but> :nth-child(2) {
        background-image: linear-gradient(180deg, #F8C2A0, #E5775B);
    }

    .app-but> :nth-child(3) {
        background-image: linear-gradient(180deg, #9AF1EA, #29AFC5);
    }

    .app-but> :nth-child(4) {
        background-image: linear-gradient(180deg, #A0A0A0, #A0A0A0);
    }

    .but-msg {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    el-pagination {
        text-align: center;
    }

    .app-done {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    /deep/ .el-input {
        width: 210px;
    }

    .app-search {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /deep/ .el-button--text {
        color: white;
    }
</style>